<template>
  <nav class="sub-menu">
    <div class="logo">
        <router-link :to="{path : '/adm/main.page'}">ADMINISTRATOR</router-link>
    </div>
    <div class="info-wrap">
      <div class="info">
        <p class="info-name">{{ mbrNm }}</p>
        <ul class="info-btn">
            <li><button class="btn-ico xsm ico-logout"  @click="fnlogOut" title="로그아웃"></button></li>
            <li><button class="btn-ico xsm ico-go"  @click="fnSiteMove" title="사이트이동"></button></li>
            <li><button class="btn-ico xsm ico-reset"  @click="cacheClean()" title="변경사항 적용"></button></li>
        </ul>
      </div>
    </div>
    <div class="menu-zone">
      <p>MENU</p>
      <ul class="side-menu">
        <template v-if="menuList.length > 0">
          <li v-for="(sub, subidx) in menuList" :key="subidx" :class="{ 'sub-active': isActive(sub.routerUrl) }">
            <div  @click="
              menuClick(
                sub.routerUrl != '' && sub.routerUrl != null
                  ? sub
                  : sub.childList[0]
              )
              ">
              <span>{{ sub.menuNm }}</span>
            </div>
            <ul v-show="sub.childList.length > 0">
              <li v-for="(third, thirdIdx) in sub.childList" :key="thirdIdx" :class="{
                'sub-active': isActive(third.routerUrl),
              }" @click="menuClick(third)">
                <span>{{ third.menuNm }}</span>
              </li>
            </ul>
          </li>
        </template>
      </ul>
    </div>
  </nav>
</template>
<script>
import store from "../pages/AppStore";
import queryParams from "../../resources/js/queryParams";
import { defaultSearchParams } from "../../resources/js/defaultSearchParams";
import { mapActions } from "vuex";
import cntnStatsSave from "../../resources/js/cntnStatsSave";
import { cacheReSet } from "../../resources/api/cacheReSet";

export default {
  mixins: [queryParams, cntnStatsSave],
  components: {},
  props: {},
  data() {
    return {
      mbrNm: store.state.mbrNm,
      currentPath: this.$route.path,
      resetSearch: { ...defaultSearchParams },
      menuList: [],
    };
  },
  created() {
    this.menuCheck();
  },
  methods: {
    menuCheck() {
      const menu = store.state.menu;
      if (menu != null && menu != "" && menu != undefined) {
        this.menuList = menu.childList;
      }
    },
    async menuClick(menu) {
      this.saveQueryParams("queryParams", this.resetSearch); // 검색조건 초기화
      await this.cntnStatsSave(menu.menuId);
      if (menu.linkType === "0") {
        // 현재창
        this.$router.push({
          path: menu.routerUrl,
        });
      } else if (menu.linkType === "1") {
        // 새창
        window.open(menu.routerUrl, "_blank");
      }
    },
    isActive(subPath) {
      const checkUrl = this.currentPath.substring(
        0,
        this.currentPath.lastIndexOf("/") + 1
      );
      return subPath.startsWith(checkUrl);
    },
    // 사이트 이동
    fnSiteMove() {
      this.$router.push({
        path: "/",
      });
    },
    ...mapActions(["logout"]),
    // 로그 아웃
    async fnlogOut() {
      await this.logout();
      this.$router.push({
        path: "/cmslogin.page",
      });
    },
    // 캐시 초기화
    async cacheClean() {
      if (!confirm("변경사항을 적용하시겠습니까?")) return;
      const res = await cacheReSet();
      alert(res.data.message);
    },
  },
  watch: {
    // 나중에 네비게이션 가드에서 form 받을 수 있으면 form adm/main으로 갈때 sotre.state값0로 바꿔주기
    $route(to) {
      this.currentPath = to.path;
    },
    async "$store.state.menu"(newVal) {
      if (newVal == null || newVal == "" || newVal == undefined) {
        this.menuList = [];
      } else {
        this.menuList = newVal.childList;
        if (newVal && this.menuList.length > 0) {
          await this.cntnStatsSave(this.menuList[0].menuId);
          if (
            newVal.menuId == "MENU_000000000000010" &&
            this.$store.state.path.includes("BBS_MNG_")
          ) {
            return;
          } else {
            this.$router.push(this.menuList[0].routerUrl);
          }
        }
      }
    },
    "$store.state.mbrNm"(newVal) {
      this.mbrNm = newVal;
    },
  },
  computed: {},
  mounted() { },
};
</script>
